<template>
	<div class="mine-wallet bs flex">
		<div class="mine-wallet-saveCard" @click="toSaveCard">
			<div><text class="mine-wallet-text">会员卡：</text></div>
			<div class="mine-wallet-amount">
				<text class="amountIcon">￥</text>
				<text class="amount">{{ balance }}</text>
			</div>
		</div>
		<div class="mine-wallet-shopCard" @click="toShopCard">
			<div ><text class="mine-wallet-text">福利卡：</text></div>
			<div class="mine-wallet-amount">
				<text class="amountIcon">￥</text>
				<text class="amount">{{ benefits }}</text>
			</div>
		</div>
	</div>
</template>
<script>
import { summary } from '../../api/card';
export default {
	name: '',
	components: {},
	filters: {}, // 过滤器
	data() {
		return {
			balance: '0.00', // 账户余额
			benefits: '0.00' // 福利金
		};
	},
	watch: {},
	props:['id'],
	created() {
		this.getSummary();
	},
	methods: {
		getSummary() {
			summary({
				memberId:this.id
			}).then(res => {
					if (res.type == 'success') {
						this.$set(this.$data, 'balance', Number(res.data.balance).toFixed(2));
						this.$set(this.$data, 'benefits', Number(res.data.benefits).toFixed(2));
					}
				})
				.catch(error => {
					console.log(error);
				});
		},
		//跳转到账户余额的页面
		toSaveCard(e) {

			eeui.openPage({ url: 'root://pages/member/saveCard/saveCard.js',statusBarType: 'immersion',statusBarStyle:false,params: { memberId: this.id }}, result => {});

		},

		//跳转到福利金的页面
		toShopCard(e) {

			eeui.openPage({ url: 'root://pages/member/shopCard/shopCard.js',statusBarType: 'immersion',statusBarStyle:false,params: { memberId: this.id }}, result => {});

		},
	}
};
</script>

<style scoped>
.flex {
	flex-direction: row;
	align-items: center;
}
.mine-wallet {
	margin: 40px 30px 0;
	height: 195px;
	/* border: 1px solid rgba(231, 233, 237, 1); */
	border-radius: 14px;
	background-color: rgba(255, 255, 255, 1);
}
.mine-wallet-text {
	padding-top: 10px;
	/* padding-left: 52px; */
	font-size: 30px;
	font-family: PingFangSC;
	font-weight: 400;
	color: rgba(26, 26, 30, 1);
	/* line-height: 42px; */
	opacity: 0.5;
}
.mine-wallet-amount {
	padding-top: 26px;
	/* line-height: 42px; */
	flex-direction: row;
	align-items: flex-end;
}

.amount {
	color: rgba(223, 187, 133, 1);
	font-size: 37px;
}

.mine-wallet-saveCard {
	padding-left: 40px;
	margin: 30px 0;
	width: 345px;
	/* border: 1px solid rgba(231, 233, 237, 1); */
}

.mine-wallet-shopCard {
	padding-left: 40px;
	margin: 30px 0;
	width: 345px;
	/* border-left: 3px solid rgba(231, 233, 237, 1); */
	border-left-style: solid;
	border-left-width: 3px;
	border-color: rgba(231, 233, 237, 1);
}
.amountIcon{
    font-size: 22px;
    margin-bottom: 4px;
    color: rgba(223, 187, 133, 1);
}
</style>
